<template>
  <div>
    <!-- 使用子组件 -->
    <!-- 匿名插槽 -->
    <!-- <Son>
      <div>我是父组件中的内荣</div>
      <p>{{userinfo.name}}--{{userinfo.age}}</p>
    </Son>-->

    <!-- 具名插槽 -->
    <!-- <Son>
      <template #header>
        <p>我是头部导航--{{count}}</p>
      </template>
      <template #main>
        <p>我是主体部分</p>
      </template>
      <template #footer>
        <p>我是底部的footer</p>
      </template>
    </Son>-->

    <!-- 作用域插槽 -->

    <Son>
      <template #default="abc">
        <div>作用域插槽</div>
        <ul>
          <li v-for="item  in abc.girlHero" :key="item.id">{{item.nickname}}--{{item.name}}</li>
        </ul>
      </template>
    </Son>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      userinfo: {
        name: "李四",
        age: 30
      },
      count: 100
    };
  },
  components: {
    Son
  }
};
</script>
<style scoped>
</style>